<template>
  <view class="login_container">
    <!-- -->
    <u-icon name="arrow-left" size="18" :style="{top:arrowTop+'px'}" color="#333" class="icon_left" @click="back"></u-icon>
    <view class="prow76 login-btn">
      <u-button
        class="custom-style-login"
        text="微信一键登录"
        iconColor="#fff"
        icon="weixin-fill"
        shape="circle"
        color="linear-gradient(to right, #57E6BF, #1FB0AC)"
        @click="wechatLogin"
      ></u-button>
    </view>
    <view class="phone prow30 flex justify-center">
      <userAgreement v-model="isChecked" />
    </view>
    <loginType loginType="phone" :isChecked="isChecked" />
  </view>
</template>

<script>
import loginType from '../components/loginType/index.vue'
export default {
  name: 'nativeLogin',
  components: {
    loginType
  },
  data() {
    return {
      customStyleOtherLogin: {
        height: '48px',
        color: '#262d2c'
      },
      isChecked: false,
      arrowTop: 0
    };
  },

  async mounted() {
    // #ifdef MP-WEIXIN || APP-PLUS
    let { safeArea: { top: safeAreaTop } } = await uni.getSystemInfoSync();
    this.arrowTop = safeAreaTop + 10
    // #endif
    // #ifdef H5
    this.arrowTop = 15
    // #endif
  },

  methods: {
    wechatLogin() {
      if (!this.isChecked) {
        return this.$u.toast('请同意用户协议和隐私政策！')
      }
      const that = this
      // #ifdef APP-PLUS
      console.log('%c [ wechatLogin ]-55', 'font-size:13px; background:pink; color:#bf2c9f;', 'wechatLogin')
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: function (event) {
          console.log('%c [ event ]-59', 'font-size:13px; background:pink; color:#bf2c9f;', event)
          const { code } = event
          //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
          that.post('api/client/app_wx_Login', { code: code }, true).then(res => {
            console.log('%c [ res ]-63', 'font-size:13px; background:pink; color:#bf2c9f;', res)
            if (res.code === 1) {
              uni.setStorageSync('token', res.data.token)
              uni.setStorageSync('userinfo', res.data)
              that.$u.toast('登录成功！')
              const timer = setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                });
                clearTimeout(timer)
              }, 1000);
              if (res.data.mobile) {
                uni.setStorageSync('mobile', res.data.mobile)
              }
              if (res.data.mobile2) {
                uni.setStorageSync('mobile', res.data.mobile2)
              }
              that.$refs.popupApp.close()
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 1000
              })
            }
          })
        },
        fail: function (err) {
          console.log('%c [ err ]-75', 'font-size:13px; background:pink; color:#bf2c9f;', err)
          // 登录授权失败
          // err.code是错误码
        }
      })
      // #endif

      // #ifdef H5
      this.$u.toast('请使用app端微信登录！')
      // #endif
    },
    back() {
      uni.navigateBack({
        delta: 1
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.login_container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-image: url("../../static/my/bg.png");
  background-size: 100% 100%;
  .icon_left {
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    z-index: 11;
  }
  .phone {
    color: $uni-text-color;
    font-size: 72rpx;
    font-weight: bold;
    margin-top: 40rpx;
  }
  .service {
    color: $uni-text-color-gray;
    font-size: 28rpx;
    margin-top: 40rpx;
  }
  .login-btn {
    padding-top: 780rpx;
    .custom-style-login {
      height: 96rpx;
    }
    .custom-style-other-login {
      height: 96rpx;
      color: $uni-text-color !important;
    }
  }
}
</style>